<template>
  <div class="helpc">
    <vheader pageTitle="帮助中心"></vheader>
    <div class="helpc-content">
      <ul>
        <li v-for="(item, index) in data" @click="toHelpInfo(index)">
          <img :src="item.img" alt="">
          <p>{{ item.text }}</p>
        </li>
      </ul>
    </div>
    <div class="helpc-footer">
      <div class="helpc-footer-top border-1px">   
        <p><span class="icon-service icon"></span>联系客服：<input type="text" value="400-608-2001" readonly> <strong>(9:30-18:30)</strong></p>
      </div>
      <div class="helpc-footer-bottom">
        <span class="icon-wechat icon"></span>
        <span>官方微信：搜索「分秒金融服务号」</span>
        <img :src="wechatBg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  import vheader from 'components/common/comHead'

  export default {
    data () {
      return {
        data: [
          {
            img: require('assets/help_land@2x.png'),
            text: '登录与注册'
          },
          {
            img: require('assets/help_anquan@2x.png'),
            text: '认证与安全'
          },
          {
            img: require('assets/help_chongzhi@2x.png'),
            text: '充值和提现'
          },
          {
            img: require('assets/help_touzi@2x.png'),
            text: '出借'
          },
          {
            img: require('assets/help_xinshou@2x.png'),
            text: '新手专享'
          },
          {
            img: require('assets/help_zifei@2x.png'),
            text: '资费申明'
          }
        ],
        wechatBg: require('assets/erweima@3x.png')
      }
    },
    methods: {
      toHelpInfo (index) {
        this.$router.push(`/helpInfo/${index}`)
      }
    },
    components: {
      vheader
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .helpc {
    .icon {
      color: $base-999;
      font-size: 30px;
    }
    &-content {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        font-size: 26px;
        color: $base-666;
        padding: 30px;
        text-align: center;
        li {
          width: 228px;
          height: 200px;
          border-bottom: 1px solid $base-f8f8f8;
          img {
            width: 74px;
            height: 70px;
            margin-bottom: 30px;
            margin-top: 40px;
          }
          &:nth-child(1),
          &:nth-child(2),
          &:nth-child(4),
          &:nth-child(5) {
            border-right: 1px solid $base-f8f8f8;
          }
          &:nth-child(4),
          &:nth-child(5),
          &:nth-child(6) {
            border-bottom: none;
          }
          
        }
      }
    }
    &-footer {
      font-size: 30px;
      padding: 0 30px;
      &-top {
        height: 108px;
        line-height: 108px;
        @include border-1px(#{$base-e5e5e5});
        p {
          color: $base-666;
          input {
            display: inline-block;
            width: 200px;
            color: #666;
          }
          span {
            margin-right: 16px;
            font-size: 28px;
          }
          strong {
            font-size: 24px;
            color: #999;
          }
        }
      }
      &-bottom {
        margin-top: 40px;
        font-size: 0;
        & span:nth-child(1) {
          margin-right: 16px;
        }
        span {
          font-size: 30px;
          color: $base-666;
        }
        img {
          display: block;
          width: 50%;
          margin: 0 auto;
          margin-top: 70px;
        }
      }
    }
  }
</style>
